<script setup>
import { ref , onMounted  } from 'vue';
import { queryAllApi , addApi ,queryByIdApi  , updateApi ,deleteByIdApi } from '../../api/dept.js';
import { ElMessage ,ElMessageBox} from 'element-plus';
// 表格
const deptList = ref([])
//查询所以部门
const search = async ()=>{
  const result =  await queryAllApi();
  if(result.code){
    deptList.value = result.data;
  }
}
//钩子函数
onMounted(()=>{
  search();
})

//对话框显示
const dialogFormVisible=ref(false)
//部门数据
const dept=ref({
  name:'',
})

//保存数据
const save= async ()=>{
  if(!deptFormRef.value) return;//如果不存在退出
  deptFormRef.value.validate(async (valid)=>{//valid表示是否校验通过:true 通过
    if(valid){ //通过
      let result ;
      if(dept.value.id){
        //修改
        result = await updateApi(dept.value);
      }else{  
         result = await addApi(dept.value);
      }
      if(result.code){
        //提示信息
        ElMessage.success('操作成功');
        //关闭对话框
        dialogFormVisible.value=false;
        //刷新数据
        search();
      }
      else{
        ElMessage.error(result.msg);
      }
    }
    else{//不通过
       ElMessage.error('验证未通过');
    }
  })

}
//新增部门
const addDept=()=>{
  dialogFormVisible.value=true;
  formTitle.value='新增部门';
  dept.value={name:''}
  //重置校验规则信息
  if(deptFormRef.value){
    deptFormRef.value.resetFields();
  }
}
//部门名称
const formTitle=ref('')
//表单校验
const rules = ref({
  name: [
    { required: true, message: '部门名称不能为空', trigger: 'blur' },
    { min: 2, max: 10, message: '部门长度为2-10位', trigger: 'blur' },
  ]
})
const deptFormRef = ref()

//查询回显
const edit=async (id)=>{ 
  formTitle.value='修改部门';
  //重置校验规则信息
  if(deptFormRef.value){
    deptFormRef.value.resetFields();
  }
  const result=await queryByIdApi(id);
  if(result.code){ 
     dialogFormVisible.value=true;
     dept.value=result.data;
  }

}
//删除
const delById = async (id)=>{ 
  //弹出确认框
   ElMessageBox.confirm('您确认删除该部门?','提示',
    {confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',}//type类型
  )
    .then(async () => {//点击确认
      const result=await deleteByIdApi(id);
      if(result.code){ 
        ElMessage.success('删除成功');
        search();
      }else{
        ElMessage.error(result.msg);
      }
    })
    .catch(() => {//点击取消
      ElMessage.info('您已取消操作')
    })

}
</script>

<template>
  <h1>部门管理</h1>
  <div class="container">
    <el-button type="primary" @click="addDept">+ 新增部门</el-button>
  </div>
  <!-- 表格 -->
   <div class="container">
    <el-table :data="deptList" border style="width: 100%">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="name" label="部门名称" width="260" align="center"/>
      <el-table-column prop="updateTime" label="最后修改时间" align="center"/>
    <el-table-column  label="操作"  align="center" >
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)" ><el-icon><EditPen /></el-icon>编辑</el-button>
        <el-button type="danger" size="small" @click="delById(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>
      </template>
    </el-table-column>
    </el-table>
   </div>

   <!-- Dialog对话框组件 -->
  <el-dialog v-model="dialogFormVisible" :title="formTitle" width="500">
    <el-form :model="dept" :rules="rules"  ref="deptFormRef">
      <el-form-item label="部门名称" label-width=80px prop="name" >
        <el-input v-model="dept.name" placeholder="请输入部门名称,长度为2-10位"  />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.container {
  margin: 10px 0px;
}

</style>
